<template>
  <div class="sub-classic">
    <div class="others">畅销类</div>
   <li
      v-for="sub in subs"
      :key="sub.id"
      is="router-link"
      :to="{path: '/details',query: {url:sub.url}}"
      tag="li"
    >
      <img :src="sub.imageUrl" alt="" />
      <span>{{ sub.title }}</span>
    </li>
    <hr class="line">
    <div class="othersone">精品类</div>
    <li
      v-for="sub in sub2"
      :key="sub.title"
      is="router-link"
      :to="{path: '/details',query: {url:sub.url}}"
      tag="li"
    >
      <img :src="sub.imageUrl" alt="" />
      <span>{{ sub.title }}</span>
    </li>
    <hr class="line">
    <div class="othersone">残存类</div>
    <li
      v-for="sub in sub2"
      :key="sub.imageUrl"
      is="router-link"
      :to="{path: '/details',query: {url:sub.url}}"
      tag="li"
    >
      <img :src="sub.imageUrl" alt="" />
      <span>{{ sub.title }}</span>
    </li>
    <hr class="line">
  </div>
</template>

<script>
import { getSubClassic } from '@/api/classic'

export default {
  name: 'SubClassic',
  data () {
    return {
      subs: [],
      sub2: []
    }
  },
  mounted () {
    this.$toast.loading({
      message: '加载中...',
      forbidClick: true
    })
  },
  // // 在渲染该组件的对应路由被 confirm 前调用。
  // 不！能！获取组件实例 `this`
  // 因为当守卫执行前，组件实例还没被创建
  beforeRouteEnter (to, from, next) {
    console.log('before route enter:', this)
    next((vm) => {
      console.log('before route enter next 回调:', vm)
      getSubClassic(to.params.id)
        .then(res => {
          console.log(res)
          vm.subs = res
          vm.sub2 = res
        })
    })
  },
  // 在当前路由改变，但是该组件被复用时调用
  // 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
  // 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
  beforeRouteUpdate (to, from, next) {
    console.log('before route update', this.$route)
    getSubClassic(to.params.id) // to相当于$route
      .then(res => {
        console.log(res)
        this.subs = res
        this.sub2 = res
      })
    // 注意，一定要调用 next() 向下一步，否则，路由导航会在这儿停止
    next()
  }

}
</script>

<style lang="scss" scoped>
.sub-classic {
    margin-left: 90px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;

    li {
      width: 30%;
      display: flex;
      flex-direction: column;
      text-align: center;
      margin-bottom: 4px;
      padding: 6px;
      span{
        font-size: 12px;
      }
      img {
        max-width: 100%;
      }
    }
    .others{
      width: 100%;
      margin-left: 15px;
      height: 20px;
      font-size: 14px;
      color: #333333;
      font-weight: bold;
    }
    .othersone{
      width: 100%;
      margin-left: 15px;
      margin-top: 0px;
      height: 20px;
      font-size: 14px;
      color: #333333;
      font-weight: bold;
    }
    .line{
      width: 90%;
    }
  }
</style>
